<template>
  <div class="list-wrapper">
    <el-table
      @row-click="rowClickFn"
      stripe
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column type="index" :index="indexMethod" label="序号" width="80"></el-table-column>
      <el-table-column
        prop="satusCode"
        label="状态"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="centerGpsLat"
        label="纬度"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="centerGpsLon"
        label="经度"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="channelId"
        label="渠道"
        width="150"
      ></el-table-column>
      <el-table-column prop="eventTimeStamp" label="事件时间"></el-table-column>
      <el-table-column prop="satusMsg" label="事件描述"></el-table-column>
      <el-table-column prop="picBase64" label="事件图片">
        <template #default="scope">
          <img
            :src="scope.row.picBase64"
            alt=""
            style="max-height: 100px; max-width: 100px"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage4"
      page-size="10"
      background
      layout="total, prev, pager, next"
      :total="totalCnt"
      @current-change="handleCurrentChange"
      style="margin-top: 10px; margin-bottom: 10px; float: right;"
    />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getResultList } from "../common/api";
const tableData = ref([]);
const rowClickFn = (row) => {
  console.log(row);
};

const currentPage4 = ref(1);
const totalCnt = ref(0);

onMounted(() => {
  getList();
});
function getList() {
  getResultList({
    pageSize: 10,
    pageNum: currentPage4.value,
  }).then((res) => {
    const { code, rows, total } = res || {};
    if (code === 200) {
      console.log(rows);
      tableData.value = rows;
      totalCnt.value = total || 0;
    }
  });
}
function handleCurrentChange(val) {
    console.log(val);
    currentPage4.value = val;
    getList();
}
function indexMethod (index) {
  return (
    (currentPage4.value - 1) * 10 + index + 1
  );
}
</script>
<style>
.list-wrapper {
  height: 30vh;
  width: 100%;
  overflow-y: scroll;
}
</style>
